import React, { useImperativeHandle, forwardRef, useRef } from "react"
import { Button, Row, Col } from "antd"
import classNames from "classnames"
const Search = ({ children, onConfirm, onClear }, ref) => {
  const searchRef = useRef(null)
  useImperativeHandle(
    ref,
    () => ({
      searchRef
    }),
    [searchRef.current]
  )
  return (
    <Row
      ref={searchRef}
      className={classNames("mb-10px", "bg-white", "px-20px", "pt-20px", "box-border")}
    >
      <div className="flex-1">{children}</div>
      <Col className="ml-18px flex justify-between">
        <Button onClick={onClear} className="mr-8px">
          重置
        </Button>
        <Button type="primary" onClick={onConfirm}>
          查询
        </Button>
      </Col>
    </Row>
  )
}
export default forwardRef(Search)
